<template>
  <MyCard title="年度游客量对比">
    <div class="charts" ref="charts"></div>
  </MyCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
const charts = ref();

const annualData = [
  {
    label: new Date().getFullYear() - 2 + '年',
    value: ['1200', '950', '500', '60', '100', '200', '300', '400', '800', '700', '600', '500'],
  },
  {
    label: new Date().getFullYear() - 1 + '年',
    value: ['500', '1000', '1200', '600', '800', '1100', '1000', '900', '400', '300', '200', '100'],
  },
  {
    label: new Date().getFullYear() + '年',
    value: ['400', '500', '600', '700', '200', '100', '600', '700', '1000', '800', '500', '300'],
  },
];
const data = {
  data: annualData,
  unit: annualData.map((item) => item.label),
  columns: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  colors: ['#FFA600', '#007AFE', '#FF4B7A'],
};

onMounted(() => {
  const myCharts = echarts.init(charts.value);
  const option = {
    // 鼠标悬停提示设置
    tooltip: {
      trigger: 'axis',
      borderWidth: 5,
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    // 图例设置
    legend: {
      icon: 'rect',
      data: data.unit,
      right: 10,
      top: 25,
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: {
      type: 'category',
      // 两侧不留白
      boundaryGap: false,
      data: data.columns,
      // 坐标轴轴线相关设置
      axisLine: {
        show: true,
        lineStyle: {
          color: '#1E6F9F',
        },
      },

      // 坐标轴刻度相关设置
      axisTick: {
        show: false,
      },
      // 分割线
      splitLine: {
        show: false, // 不要分割线
      },
    },
    yAxis: {
      name: '(人数)',
      type: 'value',
      // 两侧不留白
      boundaryGap: false,
      // 坐标轴轴线相关设置
      axisLine: {
        show: true,
        lineStyle: {
          color: '#1E6F9F',
        },
      },
      // 分割线
      splitLine: {
        show: false, // 不要分割线
      },
      // name样式
      nameTextStyle: {
        // color: 'aqua', // 不设置默认使用axisLine.lineStyle.color
        align: 'right', // 文字对齐方式
      },
    },
    series: data.data.map((value, index) => {
      return {
        data: value.value,
        name: value.label,
        //折线图
        type: 'line',
        //平滑曲线
        smooth: true,
        // 默认不显示标记，鼠标悬停才显示
        showSymbol: false,
        // 标记类型
        symbol: 'circle',
        // 线样式
        lineStyle: {
          width: 0,
        },
        //区域填充颜色
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: data.colors[index],
            },
            {
              offset: 1,
              color: '#11144E',
            },
          ]),
        },
      };
    }),
    grid: {
      left: 10,
      top: 70,
      right: 10,
      bottom: 10,
      containLabel: true,
    },
  };
  myCharts.setOption(option);
});
</script>

<style lang="scss" scoped>
.charts {
  flex: auto;
}
</style>
